<template>
    <div class="container">
        <my-header></my-header>
        <div class="box-container">
            <component :is="type" @changeType="changeType" id="box"></component>
        </div>
        <my-footer></my-footer>
    </div>
</template>
<script>
import MyHeader from "../../components/MyHeader.vue"
import LoginBox from "../Login/components/LoginBox"
import RegisterBox from "../Login/components/RegisterBox"
import MyFooter from '../../components/MyFooter.vue';
export default {
    name:'Login',
    components:{
        MyHeader:MyHeader,
        LoginBox:LoginBox,
        RegisterBox:RegisterBox,
        MyFooter
    },
    data(){
        return{
            type:"LoginBox"
        }
    },
    methods:{
        changeType:function(type){
            this.$data.type = type;
        }
    }
}
</script>
<style lang="scss" scoped>
html,body{
    width:100%;
    height: 100%;
}

.container{
    width: 100%;
    height: 100%;
    min-height: 600px;
    background-color: #eee;
    my-header{
        height: 10%;
    }
    .box-container{
        width:100%;
        height: 90%;
        padding-top:40px;
        box-sizing: border-box;
    }
}
</style>